const colors =  [{
  status: 10,
  backgroundColor: '#edebeb',
  color: '#000',
  text: '正常'
}, {
  status: 20,
  backgroundColor: '#edaf43',
  color: '#fff',
  text: '费用未通过'
}, {
  status: 30,
  backgroundColor: '#828282',
  color: '#fff',
  text: '有效期失效'
}, {
  status: 40,
  backgroundColor: '#ef4134',
  color: '#fff',
  text: '牌号有误'
}, {
  status: 50,
  backgroundColor: '#5d90ee',
  color: '#fff',
  text: '重量差异'
}, {
  status: 210,
  backgroundColor: '#5cdbad',
  color: '#fff',
  text: '转移确认'
}]
const data = {
  nodes: [{
    id: 'A',
    data: '1212',
    status: '10',
    shape: 'customNode',
    label: '第A单\n18W-18102500004\n18W-18102500006\n123456/60'
  }, {
    id: 'B',
    status: '20',
    shape: 'customNode',
    label: 'B 第一单\n18W-18102500004\n18W-18102500006\n123456/60'
  }, {
    id: 'C',
    shape: 'customNode',
    status: '20,30',
    shape: 'customNode',
    label: '第C单\n18W-18102500004\n18W-18102500006\n123456/60'  
  }, {
    id: 'D',
    status: '50,40',
    shape: 'customNode',
    label: '第D单\n18W-18102500004\n18W-18102500006\n123456/60'
  },{
    id: 'E',
    status: '50,210',
    shape: 'customNode',
    label: '第E单\n18W-18102500004\n18W-18102500006\n123456/60'
  },{
    id: 'F',
    status: '50,210',
    shape: 'customNode',
    label: '第F单\n18W-18102500004\n18W-18102500006\n123456/60'
  }],
  edges: [{   
    source: 'A',
    target: 'B'
  },{ 
    source: 'A',
    target: 'C'
  },{ 
    source: 'B',
    target: 'D'
  },{
    source: 'C',
    target: 'D'
  },{
    source: 'D',
    target: 'E'
  },{
    source: 'B',
    target: 'E'
  },{
    source: 'C',
    target: 'E'
  },{
    source: 'A',
    target: 'E'
  },{
    source: 'B',
    target: 'F'
  }]
};

G6.registerNode('customNode', {
  draw(item){
    const group = item.getGraphicGroup();
    const model = item.getModel();
    group.addShape('text', {
      attrs: {
        x: 45,
        y: 0,
        fill: '#333',
        text: model.label,
        textBaseline: 'top'
      }
    });    
    let status = model.status.split(',')
    status.forEach((item,index) => {
      let result = colors.find(child => child.status == item)
      let backgroundColor = result.backgroundColor
      group.addShape('rect', {
        attrs: {
          x: index * 10 + 5,
          y: 0,
          width: 10,
          height: 60,
          fill: backgroundColor
        }
      });      
    })
    return group.addShape('rect', {
      attrs: {
        x: 0,
        y: 0,
        width: 150,
        height: 60,
        stroke: '#666'
      }
    });
  },
  anchor (item) {
    return [
      [0, 0.5],
      [1, 0.5]
    ]
  }
});
const graph = new G6.Graph({
  renderer: 'svg',
  container: 'mountNode', 
  fitView: 'cc',
  height: 400,
  layout: new G6.Layouts['Dagre']({
    rankdir: 'LR'
  }),
  modes: {
    default: ['panCanvas']
  },  
});
graph.edge({
  shape: 'quadraticCurve',
  style: {
    stroke: '#666',
    lineWidth: 1,
    strokeOpacity: 1,
    endArrow: true
  }
});
graph.on('node:dblclick', ev=>{
  const { domEvent, item } = ev;
  const { target } = domEvent;
  console.log(ev)
});
graph.read(data);
